<template>
  <div class="main">
    <router-view/>
    <div id="darkMode">
      <span @click.stop="toggleDark()">暗黑模式</span>
      <el-switch size="small" v-model="isDark" id="darkSwitch"/>
    </div>
  </div>
</template>
<style scoped>

.main {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

#darkMode {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
}
</style>
<script setup>

import {useDark, useToggle} from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>